<template>
    <div style="padding-bottom: 20px;">
    <div class="df">  <h3>结算申请单确认<span  style="margin-left: 20px;color: #200281;">{{ Send.billNo }}</span></h3></div>
    <div style="width: 100%;border-bottom: 1px solid #000;"><h3><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">药品信息</span></h3></div>
    <el-row  :span="6" class="df" style="margin: 20px 0;">
      <el-col v-if="Send.status!==-1" :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
      <span style="display: block;width: 80px;">配送企业:</span> 
       <el-input v-model="Send.companyName" size="mini" :disabled="true"></el-input>
    </el-col>
    <el-col v-else :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
      <span style="display: block;width: 80px;">医疗机构:</span> 
       <el-input v-model="Send.instName" size="mini" :disabled="true"></el-input>
    </el-col>
    <el-col :span="6" >
         <span style="margin-right: 20px;">集采批次:</span>
         <el-select v-model="value3"  size="mini" placeholder="请选择" @change="getList()" :clearable="true">
          <el-option v-for="item in form" :key="item.value" :label="item.label" :value="item.value" >
          </el-option>
        </el-select>
      </el-col>
      
      <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;" :clearable="true"> 
        <span style="display: block;width: 80px;">订单号:</span>
        <el-select v-model="value4" size="mini" placeholder="请选择" @change="getList()" :clearable="true">
          <el-option v-for="item in form2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <span style="margin-right: 20px;">流水号:</span>
        <el-select v-model="value5" size="mini" placeholder="请选择" @change="getList()" :clearable="true">
          <el-option v-for="item in form4" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-button type="primary" class="ml" size="mini" @click="search">查询</el-button>
    </el-row>
    <el-alert size="mini" show-icon
      style="background-color: #d3deee;border: 1px solid #2558ac; color: #2558ac;font-size: 12px;">
      药品种类总数 <span class="number" style="color: #2558ac;font-weight: 700;">{{ num }}</span> 项，总金额<span class="number" style="color: #2558ac;font-weight: 700;">{{ priceSum }}</span>元。
    </el-alert>
      <el-table
          :data="tableData"
          style="width: 100%;margin-top: 20px;" size="mini">
          <el-table-column
            prop="batchName"
            label="集采批次"
            width="180">
          </el-table-column>
          <el-table-column
            prop="medicineNo"
            label="流水号"
            width="180">
          </el-table-column>
          <el-table-column
          prop="medicineName"
            label="通用名"
            width="180">
          </el-table-column>
          <el-table-column
          prop="categoryName"
            label="品种名称">
          </el-table-column>
          <el-table-column label="采购数量">
        <template slot-scope="scope">
         {{ scope.row.purchaseAmount }}
        </template>
      </el-table-column>
          <el-table-column
          prop="purchasePrice"
            label="采购价(元)">
          </el-table-column>
          <el-table-column
          prop="purchaseFee"
            label="采购金额(元)">
          </el-table-column>
          <el-table-column
            label="发票代码"
            prop="invoiceNo">
          </el-table-column>
          <el-table-column
            label="发票附件">
            <template slot-scope="scope">
            <div v-if="scope.row.invoiceNo!=''||scope.row.invoiceNo!=null"><a :href="scope.row.invoiceFile"><i class="el-icon-paperclip"></i>发票{{ scope.row.invoiceNo }}.pdf</a></div>
            <div v-else>{{ scope.row.invoiceNo }}</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin: 20px 0;margin-left: 60%;">
          <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="SIZE"
          :page-sizes="[20, 30, 40, 50]">
        </el-pagination>
     
      </div>
      <div v-if="Send.status==1">
        <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">附件</span>
      </h2>
 <div>
 <div style="display: flex; align-items: center;"> <span>确认结果附件：</span>
  <el-upload 
            :action="fileUrl()"
             :on-success="handleUploadSuccess">
            <el-button size="small" type="primary">上传文件</el-button>
          </el-upload></div>
 </div>
        <div style="display: flex;">
          <el-button class="width" type="primary" @click="sure(2)" style="margin-left:45%;margin-right: 60px;display: flex; align-items: center;justify-content: center;"><i class="el-icon-check"></i>确认通过</el-button>
        <el-button class="width" style="margin-right: 60px;display: flex; align-items: center;justify-content: center;"  type="info" @click="sure(0)"><i class="el-icon-close"></i>确认不通过</el-button>
        <el-button class="width" style="display: flex; align-items: center;justify-content: center;" @click="hide">取消</el-button> 
        </div>
      </div>
      <div v-if="Send.status==2&&userInfo.role_name.includes('cityAdmin')||Send.status==2&&userInfo.role_name.includes('districtAdmin')">
        <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">结算依据</span>
      </h2><div style="width: 600px;display: flex;margin:20px 0;"><span style="width: 60px;">报表下载:</span><button
            style="display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downError(templateName1)">供应企业应收各医药机构的药品货款明细表.xlsx</button></div>
            <button
            style="margin: 0 0 50px 60px; display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downErrorPay(templateName)">药品货款支付单.xlsx</button>
           <div style="display: flex;"> <el-button class="width" type="primary" style="margin-left:45%;margin-right: 60px;display: flex; align-items: center;justify-content: center;" @click="sure(3)"><i class="el-icon-check"></i>数据一致</el-button>
        <el-button class="width" style="margin-right: 60px;display: flex; align-items: center;justify-content: center;" type="info" @click="sure(0)"><i class="el-icon-close"></i>数据不一致</el-button>
        <el-button class="width" style="display: flex; align-items: center;justify-content: center;" @click="hide">取消</el-button></div></div>
    <div v-if="Send.status==3&&userInfo.role_name.includes('cityAdmin')||Send.status==3&&userInfo.role_name.includes('districtAdmin')">
      <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">结算依据</span>
      </h2>
      <div style="width: 600px;display: flex;margin:20px 0;"><span style="width: 60px;">报表下载:</span><button
            style="display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downError(templateName1)">供应企业应收各医药机构的药品货款明细表.xlsx</button></div>
            <button
            style="margin: 0 0 50px 60px; display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downErrorPay(templateName)">药品货款支付单.xlsx</button>
            <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">付款证明</span>
      </h2>
      <div style="display: flex; align-items: center;">
     <span>付款证明附件：</span>
      <el-upload 
            :action="fileUrl()"
             :on-success="handleUploadSuccess1">
            <el-button size="small" type="primary">上传文件</el-button>
          </el-upload>
      </div>

        <div style="display: flex;"><el-button class="width" type="primary" style="margin-left:45%;margin-right: 60px;display: flex; align-items: center;justify-content: center;" @click="sure(4)">提交</el-button>
        <el-button class="width" style="display: flex; align-items: center;justify-content: center;" @click="hide">取消</el-button></div>
    </div>
    <div v-if="Send.status==4">
      <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">结算依据</span>
      </h2>
      <div style="width: 600px;display: flex;margin:20px 0;"><span style="width: 60px;">报表下载:</span><button
            style="display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downError(templateName1)">供应企业应收各医药机构的药品货款明细表.xlsx</button></div>
            <button
            style="margin: 0 0 50px 60px; display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downErrorPay(templateName)">药品货款支付单.xlsx</button>
            <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">付款证明</span>
      </h2>
      <div style="width: 600px;display: flex;margin:20px 0;"><span style="width: 90px;">付款证明附件:</span><a :href="File1"
            style="display: block;border: none;background-color: #fff;color: #5A5A5A;">结算付款证明.xlsx</a></div>
      <div style="display:flex"><el-button class="width" type="primary" style="margin-left:45%;margin-right: 60px;display: flex;align-items: center;justify-content: center;" @click="sure(5)" >确认</el-button>
        <el-button class="width" @click="hide" style="display: flex;align-items: center;justify-content: center;">取消</el-button></div>
    </div>
    <div v-if="Send.status==-1">
      <div v-if="userInfo.role_name.includes('medical')||userInfo.role_name.includes('distribution')"><h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">结算依据</span>
      </h2>
      <div style="width: 600px;display: flex;margin:20px 0;"><span style="width: 60px;">报表下载:</span><button
            style="display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downError(templateName1)">供应企业应收各医药机构的药品货款明细表.xlsx</button></div>
            <button
            style="margin: 0 0 50px 60px; display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"  @click="downErrorPay(templateName)">药品货款支付单.xlsx</button>
            <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">付款证明</span>
      </h2>
      <div style="width: 600px;display: flex;margin:20px 0;"><span style="width: 90px;">付款证明附件:</span><a :href="File1"
            style="display: block;border: none;background-color: #fff;color: #5A5A5A;">结算付款证明.xlsx</a></div></div>
      <div><el-button class="width" style="margin-left: 45%;margin-top: 40px;display: flex;align-items: center;justify-content: center;" @click="hide">关闭</el-button></div>
    </div>
    </div>
    </template>
    
    <script>
    import { exportBlob } from "@/api/common";
    import { mapGetters } from 'vuex'
      import {getNewDetail,update} from "../../api/businessTwo/orderDetail"
      import {getToken} from '@/util/auth';
      export default {
        props: {
            Send: {
                type: Object,
            },
            flag1:{
              type:Boolean
            }
        },
        computed: {
    ...mapGetters(["userInfo"]),
  },
        data() {
          return {
            File1:null,
            File:null,
            form2:[],
            form4:[],
            templateName:"药品货款支付单.xlsx",
            templateName1:"供应企业应收各医药机构的药品货款明细表.xlsx",
      value4: null,
      value5: null,
            dialogScreen:false,
            cities:[],
            dialogVisible:false,
            addData:{},
            pageSize:20,
            tableData1:[],
            SIZE:0,
            form1:null,
            value2:null,
            value3:null,
            num:0,
            newSe:false,
              priceSum:0,
            currentPage:1,
            value:true,
            form:[   
      ],
            tableData: []
          }
        },
        created(){
          this.getList()
    console.log(this.Send);
        },
        watch:{
          value3(newValue){
          if(newValue==""||newValue==null){
            
            this.value3=null
            this.getList()
          }
          this.getList(this.value4)
    },
    value4(newValue){
          if(newValue==""||newValue==null){
            
            this.value4=null
            this.getList()
          }
          this.getList(this.value4)
    }
        },
        methods:{
            downError() {
      exportBlob(`api/billDetail/download?billNo=${this.Send.billNo}&updateTime=${this.Send.updateTime}`).then((response) => {
        if (response.data.size > 0) {
          let url = window.URL.createObjectURL(response.data);
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = this.templateName1;
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message.warning('文件不存在!');
        }
      })
    },
    downErrorPay(dataName) {
      exportBlob(`api/billDetail/downloadMedicine?templateName=${dataName}&billNo=${this.Send.billNo}&updateTime=${this.Send.updateTime}`).then((response) => {
        if (response.data.size > 0) {
          let url = window.URL.createObjectURL(response.data);
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = this.templateName;
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message.warning('文件不存在!');
        }
      })
    },
    fileUrl() {
      return `/api/blade-resource/oss/endpoint/put-file?${this.website.tokenHeader}=${getToken()}`
    },
          async getList(value){    
             if(this.Send.status==-1){
              let res=await getNewDetail({
             current:this.currentPage,
             size:this.pageSize,
             batchName: this.value3,
             billNo:this.Send.billNo,
        orderNo:value,
        medicineNo: this.value5,
        instName:this.Send.instName
             })

             this.SIZE = res.data.data.length
             if(res.data.code==200){
              let arr = []
        let arr1 = []
        let arr2 = []
        this.tableData = res.data.data
        res.data.data.map((v) => {
          
          arr.push({ value: v.orderNo, label: v.orderNo })
          arr1.push({ value: v.medicineNo, label: v.medicineNo })
          arr2.push({ value: v.batchName, label: v.batchName })
        })
        arr1.forEach((item) => {
          if (!this.form4.some(m => m.value === item.value)) {
            this.form4.push(item);
          }
          return this.form4;
        })
        

        arr2.forEach((item) => {
          if (!this.form.some(m => m.value === item.value)) {
            this.form.push(item);
          }
          return this.form;
        })

        arr.forEach((item) => {
          if (!this.form2.some(m => m.value === item.value)) {
            this.form2.push(item);
          }
          return this.form2;
        });
              this.tableData=res.data.data
             }
             this.number()
             }else{
              let res=await getNewDetail({
             current:this.currentPage,
             size:this.pageSize,
             batchName: this.value3,
             billNo:this.Send.billNo,
        orderNo: value,
        medicineNo: this.value5,
        companyName:this.Send.companyName
        
             })

             this.SIZE = res.data.data.length
             if(res.data.code==200){
              let arr = []
        let arr1 = []
        let arr2 = []
        this.tableData = res.data.data
        res.data.data.map((v) => {
          
          arr.push({ value: v.orderNo, label: v.orderNo })
          arr1.push({ value: v.medicineNo, label: v.medicineNo })
          arr2.push({ value: v.batchName, label: v.batchName })
        })
        arr1.forEach((item) => {
          if (!this.form4.some(m => m.value === item.value)) {
            this.form4.push(item);
          }
          return this.form4;
        })
        

        arr2.forEach((item) => {
          if (!this.form.some(m => m.value === item.value)) {
            this.form.push(item);
          }
          return this.form;
        })

        arr.forEach((item) => {
          if (!this.form2.some(m => m.value === item.value)) {
            this.form2.push(item);
          }
          return this.form2;
        });
              this.tableData=res.data.data
             }
             this.number()
             }
             
           
          },
          handleUploadSuccess(response,row) {
      // 处理上传成功后的响应数据
      console.log("上传成功！", response);
      // 保存返回结果到某个变量
    this.File = response.data.name;
    console.log(row,this.File);
    },
    handleUploadSuccess1(response,row) {
      // 处理上传成功后的响应数据
      console.log("上传成功！", response);
      // 保存返回结果到某个变量
    this.File1 = response.data.name;
    console.log(row,this.File);
    },
          number(){
            this.priceSum=0
      this.num = this.tableData.length
      console.log(this.tableData);
            this.tableData.map((v)=>{
              if(v.purchaseFee===null){
  v.purchaseFee=0
              }
            this.priceSum+= parseFloat(v.purchaseFee)
            console.log(parseFloat(v.purchaseFee));
                   return v
            })
          },
         
          sure(num){
            if(num==0&&this.Send.status==1){
              if(this.File==null){
                this.$message.error("请上传结算确认附件")
              }else{
                update({
  id:this.Send.id,
  status:num,
  confirm_file:this.File
}).then((res)=>{
  this.$message.success(res.data.msg)
  console.log(res);
  this.hide()
})
              }
            }else{
              if(this.File!==null&&this.File1==!null){
                update({
  id:this.Send.id,
  status:num,
  payment_file:this.File1,
  confirm_file:this.File
}).then((res)=>{
  this.$message.success(res.data.msg)
  console.log(res);
  this.hide()
})
              }else if(this.File!==null){
                update({
  id:this.Send.id,
  status:num,
  confirm_file:this.File
}).then((res)=>{
  this.$message.success(res.data.msg)
  console.log(res);
  this.hide()
})
              }else if(this.File1!==null){
                update({
  id:this.Send.id,
  status:num,
  payment_file:this.File1
}).then((res)=>{
  this.$message.success(res.data.msg)
  console.log(res);
  this.hide()
})
              }else{
                update({
  id:this.Send.id,
  status:num
}).then((res)=>{
  this.$message.success(res.data.msg)
  console.log(res);
  this.hide()
})
              }
            
            }
            
          },
          search(){
            this.getList()
          },
            handleCurrentChange(val){
          this.currentPage=val
          this.getList()
            },
            handleSizeChange(val){
              this.pageSize=val
              this.getList()
            },
            hide(){
  this.$emit("changeSure",false)
          }
          }
      }
    </script>
    
    <style lang="scss" scoped>
    .df{
      display: flex;
      align-items: center;
    }
    .jcsb{
      justify-content: space-between;
    }
    .el-table{
      margin-bottom: 30px;
    }
    .ml{
    margin-left: 60px;
    }
    ::v-deep th{
      background-color: #f1f1f1;
    }
    ::v-deep .el-table__cell{
      height: 50px !important;
    }
    h2{
      font-size: 18px;
    }
    .width{
      width: 120px;
      height: 36px;
    }
    h2{
      font-size: 14px;
    }
    .ret{
      margin-left: 30%;
      margin-right: 60px;
    }
    ::v-deep .el-alert{
      padding:4px 16px !important;
    }
    ::v-deep .el-alert__icon.is-big{
      font-size:22px !important;
    }
    ::v-deep .el-alert__description{
      margin:0

    }
    .number{
        font-size: 16px;
        color: #62c7f8;
      }
      ::v-deep th.el-table__cell{
  background-color: #fafafa;
  }
  ::v-deep .el-table__cell{
  border-right: 1px solid #EBEEF5 !important;
  text-align: center;
  }
  ::v-deep .cell{
  display: flex;
  justify-content: center;
  }
  ::v-deep .el-alert--info .el-alert__description{
  color:#000!important;
  font-size: 14px;
}
    </style>